<template>
    <div>
       <HomeTop></HomeTop>
    <HomeRight></HomeRight>
    <MyCenterPlugin></MyCenterPlugin> 
        <div class="EvaluationMan-logo">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
            <h2>我的淘宝</h2>
        </div>
        <div class="EvaluationMan-top"><div class="EvaluationMan-top-title"> 我的评价</div></div>
        <div class="EvaluationMan-myinfo">
            <div class="EvaluationMan-myinfo-title">个人信息</div>
            <div class="EvaluationMan-myinfo-title-under1">会员名:咪咪</div>
            <div class="EvaluationMan-myinfo-title-under2">阿里旺旺:和我联系</div>
            <div class="EvaluationMan-myinfo-title-under3"><ul>
                <li><i class="el-icon-caret-right"></i><a href="#">淘宝网评价规则</a></li>
                <li><i class="el-icon-caret-right"></i><a href="#">淘宝网评价规则</a></li>
                <li><i class="el-icon-caret-right"></i><a href="#">淘宝网评价规则</a></li>
               <li><i class="el-icon-caret-right"></i><a href="#">淘宝网评价规则</a></li>
               <li><i class="el-icon-caret-right"></i><a href="#">淘宝网评价规则</a></li>
               <li><i class="el-icon-caret-right"></i><a href="#">淘宝网评价规则</a></li>
                </ul></div>
        </div>
        <div class="EvaluationMan-myinfo-right">
            <div class="EvaluationMan-myinfo-right-title"><i class="el-icon-user"></i><span class="EvaluationMan-myinfo-right-title-span">&nbsp;&nbsp;卖家信誉分</span></div>
            <div class="EvaluationMan-myinfo-right-title-under">
                <div class="EvaluationMan-myinfo-right-title-under-item1">卖家信誉分:3</div>
                <div class="EvaluationMan-myinfo-right-title-under-item2"><a href="#">信誉分规则介绍</a></div>
            </div>
        </div>
        <div class="EvaluationMan-myinfo-bottom">
            <div class="EvaluationMan-myinfo-bottom-big-item">
                <div class="EvaluationMan-myinfo-bottom-big-item-one" :class="{'changeclass1':class1}" @click="change1()">来自卖家的评价</div>
                <div class="EvaluationMan-myinfo-bottom-big-item-two" :class="{'changeclass2':class2}" @click="change2()">给他人的评价</div>
                <div class="EvaluationMan-myinfo-bottom-big-item-three" :class="{'changeclass3':class3}" @click="change3()">已处理的评价</div>
            </div>
        <div class="EvaluationMan-myinfo-bottom-big-item-under">
            <el-table :data="filteredByComment" class="EvaluationMan-myinfo-bottom-big-item-under-table" v-show="class1||class2">
                <el-table-column prop="evaluation" width="100">
                     <template #header>
                        <el-dropdown @command="handleEvaluationChange">
  <span class="el-dropdown-link">
    {{ selectedEvaluation }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="评价" >评价</el-dropdown-item>
    <el-dropdown-item command="好评">好评</el-dropdown-item>
    <el-dropdown-item command="中评">中评</el-dropdown-item>
    <el-dropdown-item command="差评">差评</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column prop="evaluationInfo" width="440">
                    <template #header>
                        <el-dropdown @command="handleEvaluationChange2">
  <span class="el-dropdown-link">
    {{ selectedEvaluation2 }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="评论">评论</el-dropdown-item>
    <el-dropdown-item command="无评论内容">无评论内容</el-dropdown-item>
    <el-dropdown-item command="有评论内容">有评论内容</el-dropdown-item>
    
  </el-dropdown-menu>
</el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column prop="people" label="被评价人" width="250"></el-table-column>
                 <el-table-column prop="baby" label="宝贝信息" width="250"></el-table-column>
                  <el-table-column prop="option" label="操作" width="250"></el-table-column>

            </el-table>
            <el-table :data="evaluatelist2" class="EvaluationMan-myinfo-bottom-big-item-under-table2" v-show="class3">
             <el-table-column prop="pingjia" label="评价" width="200"></el-table-column>
              <el-table-column prop="pinglun" label="评论" width="400"></el-table-column>
               <el-table-column prop="people2" label="评价人" width="200"></el-table-column>
                <el-table-column prop="baby2" label="宝贝信息" width="200"></el-table-column>
                 <el-table-column prop="optInfo" label="处理备注" width="250"></el-table-column>
            </el-table>
        </div>
    

        </div>
    </div>
</template>
<script>
import "../style/EvaluationManView.css";
export default {
  name: "EvaluationManView",
  data() {
    return {
      class1: true,
      class2: false,
      class3: false,
      selectedEvaluation: "评价",
      selectedEvaluation2: "评论",
      evaluatelist: [
        {
          evaluation: "good",
          evaluationInfo: "太好吃了miao~",
          people: "兔子",
          baby: "狗粮",
          option: "评价",
        },
        {
          evaluation: "middle",
          evaluationInfo: "一般好吃了",
          people: "兔子",
          baby: "人粮",
          option: "评价",
        },
        {
          evaluation: "bad",
          evaluationInfo: "太难吃了awei~",
          people: "兔子",
          baby: "猫粮",
          option: "评价",
        },
      ],
      evaluatelist2: [
        {
          pingjia: "good",
          pinglun: "他说太好吃了miao~,不知道是真话假话",
          people2: "VIP兔子",
          baby2: "兔子买的狗粮",
          optInfo: "已评价",
        },
      ],
    };
  },
  mounted() {},
  computed: {
    filteredEvaluatelist() {
      if (this.selectedEvaluation === "评价") {
        return this.evaluatelist;
      } else {
        return this.evaluatelist.filter((item) => {
          if (this.selectedEvaluation === "好评") {
            return item.evaluation === "good";
          } else if (this.selectedEvaluation === "中评") {
            return item.evaluation === "middle";
          } else if (this.selectedEvaluation === "差评") {
            return item.evaluation === "bad";
          }
          return true;
        });
      }
    },

    filteredByComment() {
      // 先基于第一个筛选结果再筛选
      let result = this.filteredEvaluatelist;

      if (this.selectedEvaluation2 === "评论") {
        return result;
      } else if (this.selectedEvaluation2 === "无评论内容") {
        return result.filter(
          (item) => !item.evaluationInfo || item.evaluationInfo.trim() === ""
        );
      } else if (this.selectedEvaluation2 === "有评论内容") {
        return result.filter(
          (item) => item.evaluationInfo && item.evaluationInfo.trim() !== ""
        );
      }

      return result;
    },
  },
  methods: {
    change1() {
      this.class1 = true;
      this.class2 = false;
      this.class3 = false;
    },
    change2() {
      this.class1 = false;
      this.class2 = true;
      this.class3 = false;
    },
    change3() {
      this.class1 = false;
      this.class2 = false;
      this.class3 = true;
    },
    handleEvaluationChange(command) {
      this.selectedEvaluation = command;
    },
    handleEvaluationChange2(command) {
      this.selectedEvaluation2 = command;
    },
  },
};
</script>